<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="blog-list-fragment" class="am-u-lg-8 am-u-sm-12">
<!--    <h1 th:text="${blogPageResult.totalPages}"></h1>-->
<!--    <h1 th:text="${blogPageResult.number}"></h1>-->
    <main class="articles-list">
        <div>
            <th:block th:if="${null != blogPageResult}">
                <th:block th:each="blog,iterStat : ${blogPageResult.content}">
                    <article class="am-g blog-entry-article">
                        <div class="am-u-lg-6 am-u-lg-12 am-u-sm-12 blog-entry-text post-preview">
                            <div class="topic-header">
                                <div class="pull-left">
                                    <div class="blog-flex-center">
                                        <div class="blog-flex0">
                                            <img alt="avatar" src="/admin/dist/img/me.jpeg"
                                                 class="link avatar avatar-image">
                                        </div>
                                        <div class="author-lockup blog-flex1">
                                            <a class="link" href="javascript:;">非洲杰</a>
                                            <span class="in">in</span>
                                            <span class="category-name">
<!--                                <a class="category-name" rel="tag" th:href="@{'/category/' + ${blog.blogCategoryName}}"-->
                                                <!--                                   th:utext="${blog.blogCategoryName}">-->
                                                <!--                                    </a>-->
                            </span>
                                        </div>
                                    </div>
                                </div>
                                <span class="pull-right time pc_time"
                                      th:text="${#dates.format(blog.createdDate, 'yyyy-MM-dd')}">2021-12</span>
                            </div>
                            <h1 class="post-index-title"><a itemtype="url" th:href="@{'/blog/' + ${blog.id}}">
                                <th:block th:text="${blog.title}"></th:block>
                            </a>
                            </h1>
                            <div class="post-content-preview article-body">
                                <a th:href="@{'/blog/' + ${blog.id}}">
                                    <img th:src="@{${blog.coverImage}}" alt=""></a>
                            </div>
                            <div class="clearfix topic-footer">
                                <span class="pull-left time mobile_time">2021-12</span>
                            </div>
                    </article>
                </th:block>
            </th:block>
            <th:block th:if="${null != blogPageResult}">
                <ul class="am-pagination">
                    <li><a href='/page/1'>首页</a></li>

                    <li th:class="${blogPageResult.number==0}?'am-disabled' : 'am-pagination-prev'"><a
                            th:href="@{${blogPageResult.number==0}?'##':'/page/' + ${blogPageResult.number-1}}">&laquo;</a>
                    </li>
<!--                    <li th:if="${blogPageResult.number-3 >=0}"><a-->
<!--                            th:href="@{'/page/' + ${blogPageResult.number-3}}"-->
<!--                            th:text="${blogPageResult.number -3}">1</a></li>-->
<!--                    <li th:if="${blogPageResult.number-2 >=0}"><a-->
<!--                            th:href="@{'/page/' + ${blogPageResult.number-2}}"-->
<!--                            th:text="${blogPageResult.number -2}">1</a></li>-->
                    <li th:if="${blogPageResult.number+1 >=0}"><a
                            th:href="@{'/page/' + ${blogPageResult.number+1}}"
                            th:text="${blogPageResult.number + 1}">1</a></li>
<!--                    <li class="active"><a href="#" th:text="${blogPageResult.number}">1</a></li>-->
<!--                    <li th:if="${blogPageResult.number+1 <=blogPageResult.totalPages}"><a-->
<!--                            th:href="@{'/page/' + ${blogPageResult.number+1}}"-->
<!--                            th:text="${blogPageResult.number +1}">1</a></li>-->
<!--                    <li th:if="${blogPageResult.number+2 <=blogPageResult.totalPages}"><a-->
<!--                            th:href="@{'/page/' + ${blogPageResult.number+2}}"-->
<!--                            th:text="${blogPageResult.number +2}">1</a></li>-->
<!--                    <li th:if="${blogPageResult.number+3 <=blogPageResult.totalPages}"><a-->
<!--                            th:href="@{'/page/' + ${blogPageResult.number+3}}"-->
<!--                            th:text="${blogPageResult.number +3}">1</a></li>-->
                    <li th:class="${blogPageResult.number==(blogPageResult.totalPages-1)}?'am-disabled' : ''">
                        <a
                                th:href="@{${blogPageResult.number==(blogPageResult.totalPages-1)}?'##' : '/page/' + ${blogPageResult.number+2}}">&raquo;</a>
                    </li>

                    <li><a th:href="@{'/page/' + ${blogPageResult.totalPages}}">尾页</a></li>
                </ul>
            </th:block>
        </div>
    </main>
</div>
</html>